import 'package:flutter/material.dart';
import '../app_data_manager.dart';

/// 打卡组件
class PunchCardWidget extends StatefulWidget {
  const PunchCardWidget({super.key});

  @override
  State<PunchCardWidget> createState() => _PunchCardWidgetState();
}

class _PunchCardWidgetState extends State<PunchCardWidget> {
  bool isCheckedIn = false;
  String username = '用户名'; // 你可以通过接口设置
  final AppDataManager _appData = AppDataManager();

  @override
  void initState() {
    super.initState();
    // 确保数据加载后刷新页面
    AppDataManager().init().then((_) {
      setState(() {});
    });
  }

  // 预留设置用户名的接口
  void setUsername(String name) {
    setState(() {
      username = name;
    });
  }

  // 预留设置运势内容的接口
  void setFortuneContent(/* 你的参数 */) {
    // TODO: 设置运势内容
  }

  @override
  Widget build(BuildContext context) {
    print('打卡组件日期数据：');
    print('月份：${_appData.currentMonth}');
    print('星期：${_appData.currentWeekDay}');
    print('日期：${_appData.currentDay}');
    print('是否大月：${_appData.isLargeMonth}');
    
    return Card(
      margin: const EdgeInsets.all(12),
      child: Padding(
        padding: const EdgeInsets.all(12),
        child: isCheckedIn ? _buildCheckedInView() : _buildCheckInView(),
      ),
    );
  }

  // 打卡前视图
  Widget _buildCheckInView() {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.stretch,
      children: [
        // 第一行：欢迎回来 和 用户名
        Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            const Text('欢迎回来', style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold)),
            Text(username, style: const TextStyle(fontSize: 18, fontWeight: FontWeight.bold)),
          ],
        ),
        const SizedBox(height: 8),
        // 第二行：竖排的月份、日期、星期
        Row(
          children: [
            // 左侧竖排
            Expanded(
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Text(_appData.currentMonth == '一月' ? '一' : 
                       _appData.currentMonth == '二月' ? '二' :
                       _appData.currentMonth == '三月' ? '三' :
                       _appData.currentMonth == '四月' ? '四' :
                       _appData.currentMonth == '五月' ? '五' :
                       _appData.currentMonth == '六月' ? '六' :
                       _appData.currentMonth == '七月' ? '七' :
                       _appData.currentMonth == '八月' ? '八' :
                       _appData.currentMonth == '九月' ? '九' :
                       _appData.currentMonth == '十月' ? '十' :
                       _appData.currentMonth == '十一月' ? '十一' :
                       '十二', 
                       style: const TextStyle(fontSize: 20, color: Colors.blue)),
                  const Text('月', style: TextStyle(fontSize: 20, color: Colors.blue)),
                  Text(_appData.isLargeMonth ? '大' : '小', style: const TextStyle(fontSize: 20, color: Colors.blue)),
                ],
              ),
            ),
            // 中间日期
            Expanded(
              child: Center(
                child: Text(_appData.currentDay, style: const TextStyle(fontSize: 40, color: Colors.blue)),
              ),
            ),
            // 右侧竖排
            Expanded(
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  const Text('星', style: TextStyle(fontSize: 20, color: Colors.blue)),
                  const Text('期', style: TextStyle(fontSize: 20, color: Colors.blue)),
                  Text(_appData.currentWeekDay == '星期一' ? '一' :
                       _appData.currentWeekDay == '星期二' ? '二' :
                       _appData.currentWeekDay == '星期三' ? '三' :
                       _appData.currentWeekDay == '星期四' ? '四' :
                       _appData.currentWeekDay == '星期五' ? '五' :
                       _appData.currentWeekDay == '星期六' ? '六' :
                       '日',
                       style: const TextStyle(fontSize: 20, color: Colors.blue)),
                ],
              ),
            ),
          ],
        ),
        const SizedBox(height: 8),
        const Text('距 XXX 还剩30天', textAlign: TextAlign.center),
        const Text('距 XXX 还剩30天', textAlign: TextAlign.center),
        const SizedBox(height: 8),
        Center(
          child: ElevatedButton(
            onPressed: () {
              setState(() {
                isCheckedIn = true;
              });
            },
            child: const Text('点击打卡'),
          ),
        ),
      ],
    );
  }

  // 打卡后视图
  Widget _buildCheckedInView() {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.stretch,
      children: [
        // 顶部：用户名和"的运势"左右对称
        Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            const Text('双击编辑文本', style: TextStyle(fontSize: 18, color: Colors.blue)),
            const Text('的运势', style: TextStyle(fontSize: 18, color: Colors.blue)),
          ],
        ),
        const SizedBox(height: 8),
        // 中间：§ 中平 § 加粗、居中
        Center(
          child: Text(
            '§ 中平 §',
            style: const TextStyle(
              fontSize: 32,
              color: Colors.green,
              fontWeight: FontWeight.bold,
            ),
          ),
        ),
        const SizedBox(height: 8),
        // 下方：四个对称矩形区域
        Row(
          children: [
            // 左上
            Expanded(
              child: Container(
                margin: const EdgeInsets.all(4),
                padding: const EdgeInsets.symmetric(vertical: 12),
                decoration: BoxDecoration(
                  border: Border.all(color: Colors.grey.shade300),
                  borderRadius: BorderRadius.circular(8),
                ),
                child: Column(
                  children: const [
                    Text('宜：睡觉', style: TextStyle(color: Colors.red, fontSize: 16)),
                    SizedBox(height: 4),
                    Text('养足精力，明日再战', style: TextStyle(color: Colors.grey, fontSize: 14)),
                  ],
                ),
              ),
            ),
            // 右上
            Expanded(
              child: Container(
                margin: const EdgeInsets.all(4),
                padding: const EdgeInsets.symmetric(vertical: 12),
                decoration: BoxDecoration(
                  border: Border.all(color: Colors.grey.shade300),
                  borderRadius: BorderRadius.circular(8),
                ),
                child: Column(
                  children: const [
                    Text('忌：抢最优解', style: TextStyle(color: Colors.black, fontSize: 16)),
                    SizedBox(height: 4),
                    Text('基本肯定被虐', style: TextStyle(color: Colors.grey, fontSize: 14)),
                  ],
                ),
              ),
            ),
          ],
        ),
        Row(
          children: [
            // 左下
            Expanded(
              child: Container(
                margin: const EdgeInsets.all(4),
                padding: const EdgeInsets.symmetric(vertical: 12),
                decoration: BoxDecoration(
                  border: Border.all(color: Colors.grey.shade300),
                  borderRadius: BorderRadius.circular(8),
                ),
                child: Column(
                  children: const [
                    Text('宜：请教问题', style: TextStyle(color: Colors.red, fontSize: 16)),
                    SizedBox(height: 4),
                    Text('获得大神的解答', style: TextStyle(color: Colors.grey, fontSize: 14)),
                  ],
                ),
              ),
            ),
            // 右下
            Expanded(
              child: Container(
                margin: const EdgeInsets.all(4),
                padding: const EdgeInsets.symmetric(vertical: 12),
                decoration: BoxDecoration(
                  border: Border.all(color: Colors.grey.shade300),
                  borderRadius: BorderRadius.circular(8),
                ),
                child: Column(
                  children: const [
                    Text('忌：睡懒觉', style: TextStyle(color: Colors.black, fontSize: 16)),
                    SizedBox(height: 4),
                    Text('别人晨读晨操，你要命', style: TextStyle(color: Colors.grey, fontSize: 14)),
                  ],
                ),
              ),
            ),
          ],
        ),
        const SizedBox(height: 8),
        // 已打卡天数
        const Center(
          child: Text(
            '你已经在XXX连续打卡了17天',
            style: TextStyle(color: Colors.grey, fontSize: 14),
          ),
        ),
      ],
    );
  }
}
